import {useEffect,useState} from "react";
import {List} from "./List";
import {SearchPanel} from "./search-panel";
import * as qs from 'qs';
import {cleanObject} from "../../utils/cleanObjects";

export const ProjectListPage = () => {
  const [param,setParam] = useState({name:'',personId:''})
  const [users,setUsers] = useState([])
  const [list,setList] = useState([])
  const baseURL = process.env.REACT_APP_URL
  //请求负责人 users,就初次渲染时一次
  useEffect(()=>{
    fetch(`${baseURL}/users`).then(async res =>
    {
      if (res.ok)
        setUsers(await res.json())
    })
  },[])
  //根据input框中的项目名称和select框中负责人的名字获取项目列表
  useEffect(() => {
    fetch(`${baseURL}/projects?${qs.stringify(cleanObject(param))}`).then(async res =>
    {
      if (res.ok)
        setList(await res.json())
    })
  },[param])
  return <div>
    <SearchPanel param={param}  users={users} setParam={setParam} />
    <List list={list} users={users} />
  </div>
}